<template>
	<view class="all_box">
		<view class="meau_box">
			<view class="icons_box" v-for="(value,key,index) of icons" :key="index">
				<uni-icons :type="value" size="30" color="red"></uni-icons>
				<p>{{key}}</p>
			</view>


		</view>
		<view class="add_box">
			<uni-icons type="plusempty" size="20" color="rgba(0,0,0,.5)"></uni-icons>
			<span>音乐应用</span>
		</view>
	</view>

</template>

<script lang="ts">
	export default {
		name: "myMeau",
		data() {
			return {
				icons: {
					'最近播放': 'color-filled',
					'本地下载': 'download-filled',
					'云盘': 'cloud-upload-filled',
					'已购': 'calendar-filled',
					'我的好友': 'person-filled',
					'收藏和赞': 'star-filled',
					'我的播客': 'spinner-cycle',
					'乐迷团': 'heart-filled',
				}
			};
		}
	}
</script>

<style lang="scss">
	.all_box {
		margin: 30rpx 25rpx;
		background-color: #fff;
		border-radius: 15rpx;

		.meau_box {
			display: flex;
			flex-wrap: wrap;

			.icons_box {
				margin: 20rpx 0;
				text-align: center;
				min-width: 175rpx;

				p {
					color: rgba(0, 0, 0, .5);
				}
			}

		}

		.add_box {
			text-align: center;
			border-top: 1px solid rgba(0, 0, 0, .1);
			padding: 15rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			span{
				color: rgba(0, 0, 0, .5);
			}
		}
	}
</style>